<template>
  <div class="container pisa">
    <div class="text-center upload-box">
      <div>
        <el-upload ref="rebateUpload"
                   class="upload-demo"
                   drag
                   :action="upload"
                   name="excel"
                   :limit="1"
                   :before-upload="beforeUpload"
                   :headers="headerUpload"
                   :on-success="handleSuccess"
                   :on-remove="handleRemove"
                   :show-file-list="false"
                   :on-error="handleError"
                   :on-progress="uploadProcess"
                   v-show="isShowUpload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">{{$t('page.drop')}}，<em>{{$t('page.click')}}</em></div>
        </el-upload>
        <div class="upload-name-box">
          <div class="upload-name"
               v-show="isShowUploadtxt">
            {{uploadFile.name}}
            <span @click="handleRemove">x</span>
          </div>
          <el-progress :percentage="retunProces(percentage)"
                       :color="customColor"
                       v-show="isShowPer"></el-progress>
        </div>
      </div>
    </div>

    <div class="container-body"
         v-show="isShowStepOne">
      <div style="width:60%;float:left;">
        <img :src="stepOneList.img"
             alt=""
             style="margin-bottom:30px;width:100%;">
      </div>

      <div style="width:40%;float:left;padding-left:50px">
        <div style="text-align:right;">
          <el-button type="text"
                     @click="downloadExl()"
                     size="mini">导出表格</el-button>
        </div>

        <table id="table-2"
               width="100%">
          <tr>
            <td width="50%">
              公式
            </td>
            <td>
              {{stepOneList.formula}}
            </td>
          </tr>
          <tr>
            <td v-if="stepOneList.struct.rsquare"
                width="50%">
              R平方
            </td>
            <td>
              {{stepOneList.struct.rsquare}}
            </td>
          </tr>
          <tr v-if="stepOneList.params">
            <td width="50%">{{$t('page.parameter')}}</td>
            <td>
              <template v-for="(value, key, index) in stepOneList.params">
                <span class="data-item">{{key}}:{{value}}</span>
              </template>
            </td>
          </tr>

          <tr v-if="stepOneList.ng">
            <td width="50%">浓度值</td>
            <td>
              <template v-for="value in stepOneList.ng">
                <span class="data-item">{{value}}</span>
              </template>
            </td>
          </tr>
        </table>
      </div>
      <div class="space text-center">
      </div>
    </div>
  </div>
</template>
<script>
import easyChart from '@/components/EasyChart'
import { fetchUploadStep2 } from '@/api/table'
import { setStore, getStore } from '@/utils/common'
import { getToken, removeToken } from '@/utils/auth'

export default {
  data() {
    return {
      stepOneList: {
        params: {},
        struct: {},
        ng: '',
        x: '',
      },
      isShowLog: false, //是否显示公式
      isShowStepOne: false, //是否显示第一步表格
      isShowUpload: true,
      isShowUploadtxt: false,
      uploadFile: {},
      exlName: '', //下载表格名
      isShowPer: false,
      percentage: 0,
      customColor: '#e6a23c',
    }
  },
  components: {
    easyChart,
  },
  methods: {
    initData() {},
    goNext(route, type) {
      if (type === 1) {
        setStore('chartData', this.lightRate)
      }
      this.$router.push({ path: route })
    },
    beforeUpload(file) {
      this.uploadFile = file
      this.isShowPer = true
      this.isShowUpload = false
      this.isShowUploadtxt = true
      // this.percentage += 60 + Math.floor(Math.random() * 10)
    },
    uploadProcess(e, file, fileList) {
      this.uploadFile = file
      this.percentage = file.percentage
    },
    retunProces(num) {
      return Number(num.toFixed(0))
    },
    handleSuccess(file, filelist) {
      if (file.status === 200) {
        this.isShowPer = false
        this.isShowStepOne = true
        this.exlName = file.data.uuid
        this.stepOneList = file.data
      } else {
        if (file.status === 502) {
          this.$msgbox
            .confirm(
              '你已被登出，可以取消继续留在该页面，或者重新登录',
              '确定登出',
              {
                confirmButtonText: '重新登录',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
            .then(() => {
              store.dispatch('FedLogOut').then(() => {
                location.reload()
              })
            })
        } else {
          this.$message.error(file.msg)
        }
      }
    },
    handleError() {
      this.$message.error('发生错误请联系管理员')
    },
    logout() {
      removeToken()
      this.$router.go('/')
    },
    handleRemove() {
      this.$refs['rebateUpload'].clearFiles() //清除文件
      //上传框
      this.isShowUpload = true
      this.isShowUploadtxt = false
      //上传进度条
      this.percentage = 0
      //显示进度
      this.isShowPer = false
      this.stepOneList = {
        params: {},
        struct: {},
        ng: '',
        x: '',
      }
      this.isShowStepOne = false
    },
    downloadExl() {
      if (this.exlName) {
        const href = `${process.env.BASE_URL}receive/download/excel/1/${this.exlName}`
        window.open(href, '_blank')
      }
    },
  },
  computed: {
    upload: () => {
      return process.env.BASE_URL + 'receive/upload/pisa'
    },
    headerUpload: () => {
      const data = {}
      data.TOKEN = getToken()
      if (localStorage.getItem('spr-lang') === 'en') {
        data.LANG = 'ENG' // 传语言
      }
      return data
    },
  },
}
</script>
<style lang="less" scoped>
.pisa {
  #table-2 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000;
  }
  #table-2 tr {
    border: 1px solid #000 !important;
  }

  #table-2 td:first-child {
    border-left: 1px solid #000;
  }

  /* Padding and font style */
  #table-2 td,
  #table-2 th {
    padding: 10px 15px;
    font-size: 12px;
    font-family: Verdana;
    border-right-width: 1px;
    border-right-style: solid;
  }

  .data-item {
    display: block;
  }

  @media screen and (min-width: 1000px) {
    .data-item {
      display: inline-block;
      margin-right: 20px;
    }
  }
}
</style>